<template>
  <div>
    <el-form :model="formData" :ref="formConf.formRef" :size="formConf.size" :label-position="formConf.labelPosition" :rules="rules" :disabled="formConf.disabled" :label-width="formConf.labelWidth + 'px'">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="formData.age"></el-input>
      </el-form-item>
      <el-form-item label="报销金额" prop="money">
        <el-input v-model="formData.money"></el-input>
      </el-form-item>
      <el-form-item label="附件" prop="fileName">
        <file-upload :limit="2" v-model="formData.fileName" :fileType="fileType" :is-show-tip="formBtns"></file-upload>
      </el-form-item>
      <el-form-item label="发票的照片" prop="pic">
        <image-upload :limit="2" v-model="formData.pic" :is-show-tip="formBtns"></image-upload>
      </el-form-item>
      <el-form-item label="时间范围" prop="datarange">
        <el-date-picker v-model="formData.datarange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <vxe-table border resizable show-overflow :data="formData.tableData" :edit-config="{trigger: 'dblclick', mode: 'cell'}">
        <vxe-column type="seq" width="60"></vxe-column>
        <vxe-column field="name" title="Name" :edit-render="{autofocus: '.vxe-input--inner'}">
          <template #edit="{ row }">
            <vxe-input v-model="row.name" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="role" title="Role" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="sex" title="Sex" :edit-render="{}">
          <template #default="{ row }">
            <span>{{ formatSex(row.sex) }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-select v-model="row.sex" transfer>
              <vxe-option v-for="item in sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column field="sex2" title="多选下拉" :edit-render="{}">
          <template #default="{ row }">
            <span>{{ formatMultiSex(row.sex2) }}</span>
          </template>
          <template #edit="{ row }">
            <vxe-select v-model="row.sex2" multiple transfer>
              <vxe-option v-for="item in sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
            </vxe-select>
          </template>
        </vxe-column>
        <vxe-column field="num6" title="Number" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.num6" type="number" placeholder="请输入数值"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="date12" title="Date" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.date12" type="date" placeholder="请选择日期" transfer></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="date13" title="Week" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.date13" type="week" placeholder="请选择日期" transfer></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="address" title="Address" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.address" type="text"></vxe-input>
          </template>
        </vxe-column>
      </vxe-table>

      <div v-if="formBtns" style="text-align: center;">
        <el-button type="primary" @click.prevent="submitForm">提交</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import fileUpload from "/src/components/FileUpload/index.vue";
import imageUpload from "/src/components/ImageUpload/index.vue";
export default {
  components: {
    fileUpload,
    imageUpload,
  },
  props: {
    formData: {
      type: Object,
      default: () => ({
        username: "",
        age: 0,
        money: 0,
        fileName: "",
        pic: "",
        datarange: "",
        tableData: [
          {
            id: 10001,
            name: "Test1",
            nickname: "T1",
            role: "Develop",
            sex: "0",
            sex2: ["0"],
            num1: 40,
            age: 28,
            address: "Shenzhen",
            date12: "",
            date13: "",
          },
       
        ],
      }),
    },
    formBtns: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formConf: {
        formRef: "elForm",
        formModel: "formData",
        size: "medium",
        labelPosition: "right",
        labelWidth: 100,
        formRules: "rules",
        gutter: 15,
        disabled: false,
        span: 24,
        formBtns: false,
      },

      rules: {
        username: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
      },
      //附件类型
      fileType: ["png", "jpg", "jpeg", "doc", "xls", "ppt", "txt", "pdf"],

      sexList: [
        { label: "", value: "" },
        { label: "男", value: "1" },
        { label: "女", value: "0" },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
   // console.log(this.formData)
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        //console.log(this.formData);
        this.$emit("submit-form", this.formData);
      });
    },
    formatSex(value) {
      if (value === "1") {
        return "男";
      }
      if (value === "0") {
        return "女";
      }
      return "";
    },
    formatMultiSex(values) {
      if (values) {
        return values.map((val) => this.formatSex(val)).join(",");
      }
      return "";
    },
  },
};
</script>
  <style>
</style>
  